import React,{useEffect,useRef} from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import regimg from '../img/reg.png'
import {Link,history} from 'umi'
import {postRegUser} from '../../api/user'
import './reg.less'


interface RegType{
  name:string,
  password:string,
  confirm:string
}

function index() {
  const onFinish = (values: RegType) => {
    postRegUser('/api/user/register',values).then(res=>{
      if(confirm('是否跳转登录')){
        history.push('/login')
      }
    })
    console.log('Success:', values);
  };

  return (
    <div className='index'>
    <div className="index-menu">
      <div>
        <img src={regimg} alt="" />
      </div>
      <div>
        <h2>系统注册</h2>
        <Form
          name="form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="账户"
            name="name"
            rules={[{ required: true, message: '用户名不能为空' }]}
          >
            <Input placeholder='请输入用户名' />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder='请输入密码' />
          </Form.Item>

          <Form.Item
            name="confirm"
            label="确认"
            dependencies={['password']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请再次输入你的密码',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次密码不一致，请重新输入!'));
                },
              }),
            ]}
          >
            <Input.Password placeholder='请再次输入密码' />
          </Form.Item>

          <Form.Item >
            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
              注册
            </Button>
          </Form.Item>
        </Form>
        <p> Or <Link to='/login'>去登陆</Link> </p>
      </div>
    </div>
  </div>
  )
}

export default index
